<template>
  <view>
    <div class="Stock">
      <form class="login-form">
        <div class="Stock-text">
          <div class="logo-text" style="text-align:center;margin: 0 auto;display: block;margin-bottom: 20px;">
            <img :src="config.logo" style="width:80px;background: #000;border-radius: 50%;padding:10px;"/>
            <div style="margin-top:20px;font-weight:lighter;">{{ config.title }}</div>
          </div>
        </div>
        <div style="margin:40px 0px;">
          <div class=" Stock-dit">
            <view id="input-username" data-id="input-username">
              <el-input v-model="username" autocomplete="on" class="form-input" cursor-spacing="10" placeholder="请输入用户名"
                        @blur="blur" @focus="focus"></el-input>
            </view>
            <span class="span" data-placeholder=""></span>
          </div>
          <div class="Stock-dit">
            <view id="input-password" data-id="input-password">
              <el-input
                  v-model="password"
                  autocomplete="new-password"
                  class="form-input"
                  cursor-spacing="10"
                  placeholder="请输入密码"
                  type="password"
                  @blur="blur"
                  @focus="focus"
              ></el-input>
            </view>
            <span class="span" data-placeholder=""></span>
          </div>
          <!--          <div class="Stock-dit verifyCode">-->
          <!--            <view id="input-verifycode" class="verify-code-box">-->
          <!--              <input-->
          <!--                  v-model="verifyCode"-->
          <!--                  class="form-input"-->
          <!--                  cursor-spacing="10"-->
          <!--                  data-id="input-verifycode"-->
          <!--                  placeholder="验证码"-->
          <!--                  type="text"-->
          <!--                  @blur="blur"-->
          <!--                  @focus="focus"-->
          <!--              />-->
          <!--              <image :src="verifyUrl" class="verify-img" mode="scaleToFill" @click="refreshVerifyCode"></image>-->
          <!--            </view>-->
          <!--            <span class="span" data-placeholder=""></span>-->
          <!--          </div>-->
          <div class="">
            <el-checkbox v-model="checked">记住密码</el-checkbox>
          </div>

        </div>

        <view class="logbtn" @click="loginClick">登录</view>
      <!--  <p class="icp">
          Copyright&nbsp;©&nbsp;
          <a href="https://beian.miit.gov.cn/">guomw.cn &nbsp;&nbsp;</a>
          <span>&nbsp;&nbsp;浙ICP备18047767号-1</span>
        </p> -->
      </form>
    </div>
    <div>
      <video
          :controls="false"
          :show-center-play-btn="false"
          :show-play-btn="false"
          :show-progress="false"
          :x5-video-player-fullscreen="true"
          autoplay
          class="vidbacking-active-body-back"
          loop
          muted
          object-fit="cover"
          playsinline
          poster="../static/img/Stock-f.jpg"
          webkit-playsinline
          x5-playsinline
		  src="../static/media/video.mp4"
      ></video>
      <div class="clearfix"></div>
    </div>
    <div class="Stock-mask" style="opacity: 1;">&nbsp;</div>
  </view>
</template>

<script>
import {mapMutations} from 'vuex';
import env from '@/common/utils/env.js';
import {currentUser} from '@/common/services/system.js';

export default {
  data() {
    return {
      config: env,
      redirect: '/home',
      username: '',
      password: '',
      verifyCode: '',
      clientId: '',
      verifyUrl: '',
      checked: false
    };
  },
  onLoad(options) {
    // this.redirect = options.redirect || this.redirect;
    this.$watermark.set("");
    this.$storeInstance.getItem(env.gmwframeworkId).then(data => {
      if (data) {
        this.clientId = data.replaceAll('-', '');
      } else {
        this.clientId = new Date().getTime();
      }
      this.refreshVerifyCode();
    });

    this.$storeInstance.getItem(env.gmwframeworkId + '_save_pass').then(data => {
      if (data) {
        this.checked = data.checked;
        this.username = data.u || '';
        this.password = data.p || '';
      }
    });

  },
  methods: {
    ...mapMutations(['login']),
    refreshVerifyCode() {
      this.verifyUrl = `/auth/captcha/random.jpg?uuid=${this.clientId}&rnd=` + new Date().getTime().toString();
    },
    loginClick() {
      this.$message.closeAll();
      if (this.username === '') {
        this.$utils.notify('请输入用户名', "warning");
        return;
      }
      if (this.password === '') {
        this.$utils.notify('请输入登录密码', "warning");
        return;
      }
      // if (this.verifyCode === '') {
      //   this.$utils.notify('请输入验证码', "warning");
      //   return;
      // }
      let params = {
        username: this.username,
        password: this.password,
        uuid: this.clientId,
        client_id: "client_linan",
        grant_type: 'password'
      };
      let that = this;
      this.$login(params, async data => {
        let loginUser = await currentUser();
        that.login(loginUser);
        if (that.checked) {
          that.$storeInstance.setItem(env.gmwframeworkId + '_save_pass', {
            checked: that.checked,
            u: params.username,
            p: params.password
          });
        } else {
          that.$storeInstance.setItem(env.gmwframeworkId + '_save_pass', {checked: that.checked, u: '', p: ''});
        }
        window.location.href = that.redirect;
      });
    },
    blur(e) {
      let dom = document.getElementById(e.target.dataset.id);
      dom.removeAttribute('class');
      let att = document.createAttribute('class');
      att.value = 'verify-code-box';
      dom.setAttributeNode(att);
    },
    focus(e) {
      console.log(e);
      let dom = document.getElementById(e.target.dataset.id);
      let att = document.createAttribute('class');
      att.value = 'focus verify-code-box';
      dom.setAttributeNode(att);
    }
  }
};
</script>

<style scoped>
@import '@/static/css/Stock.css';
</style>

<style lang="scss" scoped>
.verifyCode {
  display: flex;
  flex-direction: row;
  align-items: center;

  .verify-code-box {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
  }

  .form-input {
    flex: 1;
    font-size: 16px;
    color: #fff;
    border: none;
    outline: none;
    background: none;
    height: 50px;
    font-size: 14px;
  }

  .verify-img {
    height: 50px;
    width: 100px;
    cursor: pointer;
  }
}

::v-deep .el-input {
  .el-input__inner::placeholder {
    color: #808080;
  }

  .el-input__inner {
    color: #fff;
    border: none;
    height: 50px;
    /* 去除输入框背景颜色 */
    background-color: transparent;
    -webkit-appearance: none;
    border-radius: 0px;
    padding: 12px 5px 12px 15px;

    &:-webkit-autofill,
    textarea:-webkit-autofill,
    select:-webkit-autofill {
      -webkit-text-fill-color: #fff !important;
      -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
      background-color: transparent;
      background-image: none;
      transition: background-color 50000s ease-in-out 0s; //背景色透明 生效时长 过渡效果 启用时延迟的时间
    }

    /* 去除输入框背景颜色 */
  }
}
</style>
